<template>
  <div class="main">
    <!-- 搜索 -->
    <my-seach />
    <div class="banner">
      <!-- 分类 -->
      <classify />
      <!-- 轮播 -->
      <carousel />
    </div>
    <!-- 商品列表 -->
    <goods-list />
  </div>
  <!-- 悬浮的购物车 -->
    <suspend-cart />
</template>

<script>
import MySeach from "@/components/MySeach.vue";
import Classify from "@/components/Classify.vue";
import GoodsList from "@/components/GoodsList";
import SuspendCart from "@/components/SuspendCart.vue";
import Carousel from "@/components/carousel.vue";
import { ref, onMounted } from "vue";
import { handGoods } from "@/api/api.js";
import{useStore} from "vuex"
import VueEvent from "@/js/mitt.js";
export default {
  name: "StoreMain",
  components: { MySeach, Classify, GoodsList, SuspendCart, Carousel },
  setup() {
    const store = useStore()


    onMounted(() => {
      handGoods("get", "goodsList").then((res) => {
        console.log(res.data);
        VueEvent.emit("goodsInfo", res.data);
        VueEvent.emit("flag", true);
      });
    });
    
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin: 0 auto;
  width: 70%;
  height: 100%;
  min-width: 1090px;
  margin: 0 auto;
  border-radius: 15px;
  background-color: #f7f9fa;
  padding-top: 15px;
  .banner {
    .classifyCar {
      width: 30%;
      display: inline-block;
    }
    .carousel {
      display: inline-block;
      width: 65%;
      // border: 3px solid #ea7006c3;
      // border-radius: 7px;
      vertical-align: bottom;
    }
  }
}
</style>